<template>
	<view class="">
		<u-popup :show='show' mode='bottom' :closeOnClickOverlay='true' @open='open' @close='beforeClose' :round='12'
			:safeAreaInsetBottom='false' bgColor='transparent'>
			<view class="plr-16 pt-16 batch br-t-12">
				<view class="text-center font-color-textPrimary font-w-600">
					批量下单
				</view>
				<view class="flex flex-js-sb flex-ai-center ptb-16 price-limit item" style="border-bottom: 2rpx solid #eee;">
					<text class="lable">限价</text>
					<view class="flex font-color-textPrimary">
						最高
						<input v-model="form.price" :auto-focus="autoFocus" class='price-limit-inp' style="color: #EA1F15;" type="number" name="" id="" />
						元
					</view>
				</view>
				<view class="flex flex-js-sb flex-ai-center ptb-16 num-limit item">
					<text class="lable">下单数量</text>
					<view class="flex flex-ai-center">
						<w-icon :name="form.num<=1? 'minus-disable':'minus-active'" size="18" @click='minus'>
						</w-icon>
						<input v-model="form.num" type="number" @input="changenum" class="plr-4 font-color-textPrimary"
							style="width: 100rpx;text-align: center;" />
						<w-icon :name="form.num>=product.batch_pay_num? 'add-disable':'add-active'" size="18"
							@click='add'></w-icon>
					</view>
				</view>
				<w-button :disabled="disabled" class="mt-32" shape="circle" @click='checkVerifyStatus'>确认</w-button>
			</view>

		</u-popup>
		<w-jy-verify ref="captcha" v-if="captchaStatus" @success='submit'></w-jy-verify>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {
		bacthCreateOrder
	} from '@/api/order/index.js'
	export default {
		props: {
			show: {
				default: false,
				type: Boolean
			},
			product: {
				type: Object,
				default () {
					return {

					}
				}
			}
		},
		model: {
			prop: "show",
			event: 'change'
		},
		data() {
			return {
				form: {
					price: 0,
					num: 1
				},
				timer: null,
				autoFocus:false,
				immediate: true
			}
		},
		computed: {
			disabled() {
				let able = this.form.price && this.form.num
				return !able
			},
			...mapState('config', {
				captchaStatus(state) {
					return !!Number(state.info.batchBuy_check)
				}
			})
		},
		watch:{
			show(value){
				if(value) this.autoFocus = true
				else this.autoFocus = false
			}
		},
		methods: {
			checkVerifyStatus(){
				if(this.captchaStatus){
					this.$refs.captcha.showCaptcha();
					this.$emit('change',false)
				}else{
					this.submit();
				}
			},
			beforeClose() {
				this.$emit('change', false)
			},
			open() {
				this.form.price=this.product.max_price
				this.form.num = this.product.batch_pay_num
			},
			submit(validate) {
				let {
					key,
					id
				} = this.product;
				
				if (!this.immediate) return;
				this.immediate = false
				bacthCreateOrder(Object.assign(this.form, {
					key,
					goods_id: id,
					...validate
				})).then(res => {
					this.immediate = false;
					uni.showToast({
						title: res.msg,
						success() {
							setTimeout(() => {
								uni.setStorageSync('order-list', {
									status: 0,
									type: 2
								})
								uni.navigateTo({
									url: '/pages/order/list'
								})
							}, 1500)
						}
					})
				}).catch(()=>{
					this.immediate = true
				})
			},
			changenum({
				detail
			}) {
				if (this.timer) clearTimeout(this.timer);
				let {
					value
				} = detail;
				if (!value) value = 1;
				value = parseInt(value);
				if (value < 1) value = 1
				if (value > this.product.batch_pay_num) value = this.product.batch_pay_num
				this.timer = setTimeout(() => {
					this.form.num = value
				}, 800)

			},
			minus() {
				if (this.form.num == 1) return;
				this.form.num = parseInt(this.form.num)
				this.form.num--
			},
			add() {
				if (this.form.num == this.product.batch_pay_num) return;
				this.form.num = parseInt(this.form.num)
				this.form.num++
			}
		}
	}
</script>

<style lang="scss">
	.batch {
		background: $item-bg-color;
		padding-bottom: calc(14rpx + env(safe-area-inset-bottom));

		.item {
			.lable {
				font-size: 28rpx;
				@extend .font-color-666;
			}
		}

		.price-limit {
			&-inp {
				width: 100rpx;
				@extend .text-center, .mlr-2, .font-w-500, .font-color-main-text;
			}
		}
	}
</style>